import { debounce } from '@neu/biz-core/utils'
import { EleResize } from './esresize'
import {
  getPieOption,
  getPieOption as getPieNestOption,
  getBarOption,
  getBarOption as getLineOption,
  getBar3DOption,
  getGaugeOption,
  getRadarOption,
  getDoughnutOption,
  getSimpleBarOption
} from '../options'

const chartOptions = {
  getPieOption,
  getPieNestOption,
  getBarOption,
  getLineOption,
  getBar3DOption,
  getGaugeOption,
  getRadarOption,
  getDoughnutOption,
  getSimpleBarOption
}

export default {
  data() {
    return {
      echartRef: null,
      $_sidebarElm: null,
      $_resizeHandler: null
    }
  },
  mounted() {
    const _this = this
    // const random = Math.floor(Math.random() * 80 + 20)
    setTimeout(() => {
      this.$nextTick(() => {
        this.$$chartInstance = null
        this.initChart(this.$refs[this.echartRef])

        const listener = function() {
          _this.$$chartInstance.resize()
        }
        EleResize.on(this.$refs[this.echartRef], listener)
      })
    }, 0)
    // random * 10
  },
  activated() {
    if (!this.$_resizeHandler) {
      // avoid duplication init
      this.initListener()
    }
    // when keep-alive chart activated, auto resize
    this.resize()
  },
  beforeDestroy() {
    this.$$chartInstance.dispose()
    this.$$chartInstance = null
    this.destroyListener()
  },
  deactivated() {
    this.destroyListener()
  },
  methods: {
    // 同时还接受父组件传来的 option
    setOption(option) {
      this.$$chartInstance.clear()
      this.$$chartInstance && this.$$chartInstance.setOption(option)
    },
    initChart(chartDom) {
      this.$$chartInstance = this.$echarts.init(chartDom, 'echartsTheme')
      const option = chartOptions[`get${this.config.type.slice(0, 1).toUpperCase() + this.config.type.slice(1)}Option`](this.config, this.$$chartInstance._theme.color)
      this.setOption(option)
      if(this.isClick) {
        this.$$chartInstance.on('click', (event) => {
          const names = event.dimensionNames
          const componentIndex = event.componentIndex
          const param = {name: names[0],componentIndex: componentIndex }
          this.$emit('seriesClick', param)
        })
      }
      this.initListener()
    },
    initListener() {
      this.$_resizeHandler = debounce(() => {
        this.resize()
      }, 100)
      window.addEventListener('resize', this.$_resizeHandler)

      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    resize() {
      this.$$chartInstance && this.$$chartInstance.resize()
    },
    destroyListener() {
      window.removeEventListener('resize', this.$_resizeHandler)
      this.$_resizeHandler = null
      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
    }
  },
  created() {
    this.echartRef = 'echart' + Math.floor(Math.random() * 10000000)
  },
  watch: {
    config: {
      handler(val) {
        const option = chartOptions[`get${val.type.slice(0, 1).toUpperCase() + val.type.slice(1)}Option`](val, this.$$chartInstance._theme.color)
        this.setOption(option)
      },
      deep: true
    },
    width: {
      handler(val) {
        this.$_resizeHandler()
      }
    },
    height: {
      handler(val) {
        this.$_resizeHandler()
      }
    },
    theme: function() {
      this.$$chartInstance.dispose()
      this.initChart(this.$refs[this.echartRef])
    }
  },
  computed: {
    theme() {
      return this.$store ? this.$store.state.settings.activeTheme : 'theme-default'
    }
  }
}
